<template>
  <div class="my-container">
    <div class="header">
      <div class="title-box">
        <div class="line"></div>
        <div class="title">我的应用</div>
      </div>
    </div>
    <div class="content">
      <div class="plate">
        <div class="list-box">
          <div class="row">
            <div class="title">常用应用</div>
            <div class="list">
              <div class="list-items">
                <div class="content">
                  <img src="http://warehouse-api.lanbeiduo.com/api/file/download/b1XALh4hmX_icon.jpg" alt="" class="icon">
                  <div class="text">预警信息</div>
                  <el-icon class="check">
                    <Check />
                  </el-icon>
                </div>
              </div>
              <div class="list-items">
                <div class="content">
                  <img src="http://warehouse-api.lanbeiduo.com/api/file/download/b1XALh4hmX_icon.jpg" alt="" class="icon">
                  <div class="text">预警信息</div>
                </div>
              </div>
              <div class="list-items">
                <div class="content">
                  <img src="http://warehouse-api.lanbeiduo.com/api/file/download/b1XALh4hmX_icon.jpg" alt="" class="icon">
                  <div class="text">预警信息</div>
                </div>
              </div>
              <div class="list-items">
                <div class="content">
                  <img src="http://warehouse-api.lanbeiduo.com/api/file/download/b1XALh4hmX_icon.jpg" alt="" class="icon">
                  <div class="text">预警信息</div>
                </div>
              </div>
              <div class="list-items">
                <div class="content">
                  <img src="http://warehouse-api.lanbeiduo.com/api/file/download/b1XALh4hmX_icon.jpg" alt="" class="icon">
                  <div class="text">预警信息</div>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="title">办事大厅</div>
            <div class="list">
              <div class="list-items">
                <div class="content">
                  <img src="http://warehouse-api.lanbeiduo.com/api/file/download/b1XALh4hmX_icon.jpg" alt="" class="icon">
                  <div class="text">预警信息</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
defineOptions({
  name: 'myApp'
})

</script>

<style lang="scss" scoped>
.my-container {
  width: 100rem;
  margin: 2.1875rem auto;
  background: #fff;

  .header {
    width: 100%;
    padding: 1.875rem 1.875rem .625rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    .title-box {
      display: flex;
      align-items: center;

      .line {
        width: 4px;
        height: 1.5rem;
        background: #2382f1;
        margin-right: 1rem;
      }

      .title {
        font-size: 1.5rem;
        font-family: PingFang SC-Semibold\, PingFang SC;
        font-weight: 600;
        color: #333;
        line-height: 1.5rem;
      }
    }
  }

  .content {
    padding: .625rem 1.875rem;

    .plate {
      min-height: 31.25rem;

      .row {
        padding: 1rem 0 .875rem;
        min-height: 6.5rem;

        .title {
          margin-bottom: .8125rem;
          font-size: 1.125rem;
          font-family: PingFang SC-Medium\, PingFang SC;
          font-weight: 500;
          color: #333;
          line-height: 1.5rem;
        }

        .list {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          min-height: 5rem;
          line-height: 5rem;

          .list-items {
            position: relative;
            margin-right: 1.25rem;
            margin-bottom: .9375rem;
            width: 15rem;
            height: 5rem;
            box-sizing: border-box;
            background: #fff;
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #dcdee0;
            cursor: pointer;

            .content {
              padding: .8125rem 1.0625rem;
              width: 15rem;
              height: 5rem;
              display: flex;
              align-items: center;

              .icon {
                width: 3.875rem;
                height: 3.875rem;
                margin-right: 4px;
              }

              .text {
                line-height: 1.375rem;
                font-size: 1rem;
                font-family: PingFang SC-Regular\, PingFang SC;
                font-weight: 400;
                color: #000;
                white-space: pre-wrap;
              }

              .check {
                position: absolute;
                width: 1.375rem;
                height: 1.375rem;
                top: .625rem;
                right: .5rem;
                color: #9fa6ac;
              }
            }
          }
        }
      }
    }
  }
}
</style>
